import React, {memo, useEffect, useState} from 'react';
import SongSheetStyle from "./SongSheetStyle";
import UnitBox from "../../../../components/part/unitBox/UnitBox";
import SongSheetItem from "../../../../components/part/songSheetItem/SongSheetItem";
import {Pagination} from "antd";
import {MusicCollect} from "../../../../interface/MusicCollectInterface";
import {getFavoriteMusicCollectApi} from "../../../../services/favoriteCount";

type Props = {};
type SongSheetItemType={
  coverUrl:string,
  songName:string,
  releaseTime:string
}

export default memo(function SongSheet(props: Props) {
  const userId:number=parseInt(localStorage.getItem("yf_gaduation_zzmusic_user_id") as string);
  const [musicCollectList,setMusicCollectList]=useState<MusicCollect[]>([]);
  const [resultObj,setResultObj]=useState<any>({});
  useEffect(() => {
    getFavoriteMusicCollectApi({type:1,userId}).then((result:any)=>{
      setMusicCollectList(result.data.data.data);
      setResultObj(result.data.data);
    },(error)=>{
      console.log(error);
    });
  }, []);

  return (
    <SongSheetStyle>

      <UnitBox title={"我收藏的歌单"} isShowLine={true}>
        <>
          <div className="song-sheet-content">
            {
              musicCollectList.map((item,index:number)=>{
                return(<SongSheetItem
                  key={index}
                  songName={item.name}
                  coverUrl={item.cover}
                  releaseTime={item.createTimer}
                  size={236}
                  id={item.musicCollectId}
                />)
              })
            }
          </div>
          {/* 使用antd分页器 */}
          <div className="song-sheet-bottom-box">
            <Pagination defaultCurrent={resultObj.pageSize}
                        defaultPageSize={resultObj.pageNum}
                        total={resultObj.total} hideOnSinglePage={true}/>
          </div>
        </>
      </UnitBox>

    </SongSheetStyle>
  );
});
